<template>
  <view class="main-container">

    <view class="title-bar"><!-- 标题栏-->
      <view class="title">
<!-- 		<textarea  maxlength="10"></textarea> -->
		<input class="title-text" v-model="title" placeholder="请输入标题"/>
        <!-- <input   /> --> <!-- </textarea> -->
      </view>
      <text @click="send()" class="title-send"> 发布 </text>
    </view>

    <view class="line" style="margin-top: 5px"></view>

    <view class="content"><!--正文部分-->
<!--      <textarea v-model="content" class="content-text" placeholder="输入内容（最多1000字）">
      </textarea> -->
      <u--textarea v-model="content" height="260px" maxlength="1000" placeholder="请输入内容"  count></u--textarea>
      <view class="upload">
        <image @click="uploadImgs()" class="uploadImg" src="../static/addImage.png"></image>
        <image v-if="img.length>0" v-for="i in img" class="img" :src="i"></image>
      </view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        title: '',
        content: '',
        img: [],
        imgNames:[],
        imgName: ''
      }
    },
    created() {
      // this.downloadImg();
    },
    methods: {
      send() { //发帖
        let article = {
          title: this.title,
          content: this.content, // 前面加几个空格
          imgs: this.imgNames
        }
        console.log(article);
        uni.request({
          url: 'http://127.0.0.1:800/mhs/article/send', //仅为示例，并非真实的资源
          method: 'POST',
          header: {
            'token': uni.getStorageSync('token')
          },
          data: article,
          success: (res) => {
            if (res.data.code == 1) {
              uni.showToast({
                title: '发布成功!',
                duration: 2000,
                mask: true //是否有透明蒙层，默认为false 
              })
              //跳转到article页
              uni.navigateTo({
                  url: 'article/article'
              });
            }
          }
        });
      },
      uploadImg() { //上传单个文件
        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            uni.uploadFile({ 
              url: 'http://127.0.0.1:8091/mhs/article/upload',
              filePath: tempFilePaths[0],
              name: 'file',
              header: {
                'token': uni.getStorageSync('token')
              },
              formData: {},
              success: (res) => {
                let res1 = JSON.parse(res.data); // 不知道为啥这里要转JSON,不然获取不到data中的值
                //直接把后端接口地址作为url,image加载时会自动发送请求
                this.imgName = `http://127.0.0.1:8091/mhs/article/download?name=${res1.data}`;
                this.imgNames.push(res1.data);
                this.img.push(this.imgName);
              }
            });
          }
        });
      },
      uploadImgs() { //上传多个文件 参考 https://blog.csdn.net/mwh_user/article/details/108180029
        //在微信小程序中不支持多张图片上传，需要做循环实现多张图片上传
        uni.chooseImage({
          success: (chooseImageRes) => {
            const tempFilePaths = chooseImageRes.tempFilePaths;
            let count = tempFilePaths.length + this.img.length;
            if (count > 5) {
              uni.showToast({
                title: '最多上传5张图片',
                duration: 2000,
                icon: 'none',
                mask: true //是否有透明蒙层，默认为false 
              })
              return;
            }
            for (let i = 0; i < tempFilePaths.length; i++) {
              uni.uploadFile({
                url: 'http://127.0.0.1:8091/mhs/article/upload',
                filePath: tempFilePaths[i],
                name: 'file',
                header: {
                  'token': uni.getStorageSync('token')
                },
                formData: {},
                success: (res) => {
                  let res1 = JSON.parse(res.data); // 不知道为啥这里要转JSON,不然获取不到data中的值
                  if(res1.code == 0){
                    uni.showToast({
                      title: '图片大小不能超过1MB',
                      duration: 2000,
                      icon: 'none',
                      mask: true //是否有透明蒙层，默认为false 
                    })
                    return;
                  }
                  //直接把后端接口地址作为url,image加载时会自动发送请求
                  this.imgName = `http://127.0.0.1:8091/mhs/article/download?name=${res1.data}`;
                  this.img.push(this.imgName);
                  this.imgNames.push(res1.data);
                  console.log(this.imgName);
                  console.log(this.img);
                }
              });
            }
          }
        });
      },
      downloadImg() {
        uni.downloadFile({
          url: 'http://127.0.0.1:8091/mhs/article/download', //仅为示例，并非真实的资源
          header: {
            'token': uni.getStorageSync('token')
          },
          data: {
            name: this.imgName
          },
          success: (res) => {
            if (res.statusCode === 200) {
              console.log('下载成功');
            }
          }
        });
      }

    }
  }
</script>

<style lang="scss">

  .title {
    height: 1vw;
    width: 40vw;
    padding-right: 10vw;
  }

  .title-bar {
    /* background-color: pink; */
    height: 8vw;
    
  }

  .title-text {
    margin-left: 35vw;
    font-size: 5vw;
    width: 90%;
  }

  .title-send {
    /* color: rgba(0 ,0, 0,0.3); */
    float: right;
    margin-right: 2vw;
    font-size: 5vw;
  }

  .content {
    margin-top: 5vw;
    height: 150vw;
  }

  // .content-text {
  //   height: 200px !important;
  //   // elments.s
  //   height: 100px;
  //   font-size: 5vw;
  // }

  /* 横线 */
  .line {
    float: right;
    width: 100%;
    height: 1px;
    margin-top: -0.5em;
    background: #d4c4c4;
    position: relative;
    text-align: center;
  }

  .upload {
    height: 80vw;
    width: 100%;
    //弹性布局 https://uniapp.dcloud.net.cn/tutorial/nvue-css.html#flex-%E5%AE%B9%E5%99%A8
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .uploadImg {
    // float: left;
    height: 30vw;
    width: 30vw;
    // margin-right: 60vw;
  }

  .img {
    height: 30vw;
    width: 30vw;
    mode: aspectFill
  }
</style>